import React, { Component } from 'react';
import { 
    Tab, Table, Pagination, Loading, 
    Animate, Dialog, Button, Radio,
    Form, Select, Message, Input,
} from '@alifd/next';
import {
    requestWorkFlowComplete,
    requestTurnDownSponsor,
    requestTurnDownPrevious,
    requestCirculation,
    requestFreeCirculation,
    requestTaskInfo,
    requestTurnDownCancel,
} from '../../reducer/ProcessTaskAction';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const {Option, OptionGroup} = Select;

const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 14
    }
};   

export default class ApprovalDialog extends Component {
    constructor(props) {
        super(props);
        this.state = {
            circulationData: [],
            freeCirculationData: [],
            showCirculation: 'normal',
            taskData: {}
        }
    }

    componentDidMount() {
        requestTaskInfo({taskId: this.props.taskId})
        .then((model) => {
            console.log(model)
            this.setState({
                taskData: model.data && model.data.auths
            })
        });
    }

    agreeApproval = async (values) => {
        values.status = "S";
        values.taskId = this.props.taskId;
        console.log('values===',values);
        let model;
        try {
            model = await requestWorkFlowComplete(values);
            console.log('model===',model);
            if (model) {
                Message.show({
                    type: 'success',
                    title: '审批成功',
                    duration: 2000
                })
                this.props.onHideApproval();
                this.props.onRefresh({current: 1, user: 1, group: 1});
            }
        } catch (error) {
            console.log(error)
        }
    }

    refuseApproval = async (values) => {
        values.status = "J";
        values.taskId = this.props.taskId;
        console.log('values===',values);
        let model;
        try {
            model = await requestWorkFlowComplete(values);
            console.log('model===',model);
            if (model) {
                Message.show({
                    type: 'success',
                    title: '拒绝成功',
                    duration: 2000
                })
                this.props.onHideApproval();
                this.props.onRefresh({current: 1, user: 1, group: 1});
            }
        } catch (error) {
            console.log(error)
        }
    }

    onTurnDownCancel = async (values) => {
        //console.log(values)
        let data = {
            taskId: this.props.taskId,
            user: values.user,
            message: values.message,
        }
        let model;
        try {
            model = await requestTurnDownCancel(data);
            console.log('model===',model);
            if (model) {
                Message.show({
                    type: 'success',
                    title: '撤销成功',
                    duration: 2000
                })
                this.props.onHideApproval();
                this.props.onRefresh({current: 1, user: 1, group: 1});
            }
        } catch (error) {
            console.log(error)
        }
    }

    onTurnDownSponsor = async () => {
        let data = {
            taskId: this.props.taskId,
            user: '10000028061339'
        }
        let model;
        try {
            model = await requestTurnDownSponsor(data);
            console.log('model===',model);
            if (model) {
                Message.show({
                    type: 'success',
                    title: '驳回到发起人成功',
                    duration: 2000
                })
                this.props.onHideApproval();
                this.props.onRefresh({current: 1, user: 1, group: 1});
            }
        } catch (error) {
            console.log(error)
        }
    }

    onTurnDownPrevious = async () => {
        let data = {
            taskId: this.props.taskId,
            user: '10000028061339'
        }
        let model;
        try {
            model = await requestTurnDownPrevious(data);
            console.log('model===',model);
            if (model) {
                Message.show({
                    type: 'success',
                    title: '驳回上一步成功',
                    duration: 2000
                })
                this.props.onHideApproval();

                this.props.onRefresh({current: 1, user: 1, group: 1});
            }
        } catch (error) {
            console.log(error)
        }
    }

    circulationChange = async (value, e) => {
        const { circulationData, freeCirculationData } = this.state;
        if (value == "select") {
            if (circulationData.length < 1) {
                let model;
                try {
                    model = await requestCirculation({taskId: this.props.taskId});
                    console.log('model===',model);
                    if (model) {
                        this.setState({
                            showCirculation: "select",
                            circulationData: model.data
                        })
                    }
                } catch (error) {
                    console.log(error)
                }
            } else {
                this.setState({
                    showCirculation: "select",
                })
            }
        } else if (value == "free") {
            if (freeCirculationData.length < 1) {
                let model;
                try {
                    model = await requestFreeCirculation({taskId: this.props.taskId});
                    console.log('model===',model);
                    if (model) {
                        this.setState({
                            showCirculation: "free",
                            freeCirculationData: model.data
                        })
                    }
                } catch (error) {
                    console.log(error)
                }
            } else {
                this.setState({
                    showCirculation: "free",
                })
            }
        } else {
            this.setState({
                showCirculation: "normal",
            })
        } 
    }

    statusChange = (value) => {

    }

    render () {
        const {
            isShowApproval,
            onHideApproval
        } = this.props;
        const { circulationData, showCirculation, freeCirculationData, taskData } = this.state;

        let CirculationType;
        if (showCirculation == "normal") {
            CirculationType = ("")
        } else if (showCirculation == "select") {
            CirculationType = (
                <FormItem>
                    <RadioGroup name="flowId" onChange={this.statusChange}>
                        {
                            circulationData && circulationData.length && circulationData.map((item) => {
                                const { name, id } = item;
                                return (
                                    <Radio value={id} key={id}>{name}</Radio>
                                )
                            })
                        }
                    </RadioGroup>
                </FormItem>
            )
        } else if (showCirculation == "free") {
            CirculationType = (
                <FormItem
                    label="跳转节点:"
                >
                    <Select name="flowId" placeholder="请选择节点">
                        {
                            freeCirculationData && freeCirculationData.map((item, index) => {
                                const {type, data} = item;
                                return (
                                    <OptionGroup label={type} key={index}>
                                        {
                                            data && data.map((child, k) => {
                                                return (
                                                    <Option value={child.id} key={k}>{child.name}</Option>
                                                )
                                            })
                                        }
                                    </OptionGroup>
                                )
                            })
                        }
                    </Select>
                </FormItem>
            )
        }

        return (
            <Dialog
                title="审批"
                visible={isShowApproval}
                footer={false}
                onClose={() => onHideApproval('close')}
            >
                <Form {...formItemLayout} className="form-project-box" labelAlign="top">
                    <FormItem
                        label="备注:"
                        hasFeedback
                    >
                        <Input.TextArea name="message" />
                    </FormItem>
                    <FormItem
                        label="选择用户:"
                    >
                        <Select name="user" placeholder="请选择用户">
                            <option value="10000028061339">何玲</option>
                            <option value="10000028061349">李慧萍</option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <RadioGroup name="circulation" onChange={this.circulationChange} defaultValue={'normal'}>
                            <Radio value="normal">正常流转</Radio>
                            <Radio value="select">选择流转</Radio>
                            <Radio value="free">自由流转</Radio>
                        </RadioGroup>
                    </FormItem>
                    {
                        CirculationType
                    }
                    <FormItem wrapperCol={{ offset: 6 }} >
                        <Form.Submit type="primary" onClick={this.agreeApproval}>同意</Form.Submit>
                        {
                            taskData && taskData.iscancel == "true" ? (<Form.Submit type="normal" style={{marginLeft: 10}} onClick={this.onTurnDownCancel}>撤销</Form.Submit>) : null
                        }
                        {
                            taskData && taskData.isturnbackstart == "true" ? (<Button type="normal" style={{marginLeft: 10}} onClick={this.onTurnDownSponsor}>驳回到发起人</Button>) : null
                        }
                        {
                            taskData && taskData.isturnback == "true" ? (<Button type="normal" style={{marginLeft: 10}} onClick={this.onTurnDownPrevious}>驳回到上一步</Button>) : null
                        }
                    </FormItem>
                </Form>
            </Dialog>
        )
    }
}